<template>
  <view class="page">
    <!-- Header -->
    <view class="nav" :style="{ paddingTop: statusBarPx + 'px' }">
      <view class="search">
        <view class="search-icon">
          <image src="/static/images/result/search-icon.png" mode="scaleToFill" />
        </view>
        <input
          class="search-input"
          v-model.trim="keyword"
          placeholder="请输入搜索内容"
          placeholder-class="ph"
          @input="onSearch"
        />
      </view>
    </view>

    <!-- List -->
    <view class="list">
      <view v-for="(row, idx) in filtered" :key="idx" class="cell">
        <view class="left">
          <image
            class="avatar"
            :src="`/static/images/result/${row.symbol}.png`"
            mode="scaleToFill"
          />
        </view>
        <view class="content">
          <view class="title-line">
            <text class="symbol">{{ row.symbol }}</text>
            <view class="chips">
              <view class="chip" :class="row.side === 'buy' ? 'chip-buy' : 'chip-sell'">
                <text class="chip-arrow">{{ row.side === 'buy' ? '↑' : '↓' }}</text>
                <text>{{ row.side === 'buy' ? '购买' : '卖出' }}x{{ row.multiple }}</text>
              </view>
              <view class="chip chip-goal">目标{{ row.goal }}</view>
            </view>
          </view>
          <view class="sub-line">
            <text class="sub">成交于:{{ row.dateText }}，{{ row.timeText }}</text>
          </view>
        </view>
        <view class="dropdown"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    const sys = uni.getSystemInfoSync()
    const statusBarPx = sys.statusBarHeight || 0
    const navHeightPx = statusBarPx + 56
    return {
      statusBarPx,
      navHeightPx,
      bottomSafePx: sys.safeAreaInsets ? sys.safeAreaInsets.bottom : 0,
      bottomBarHeight: 64,
      keyword: '',
      items: [
        {
          symbol: 'OPUSDT',
          side: 'buy',
          multiple: 35,
          goal: 5,
          dateText: '4 月 18 日',
          timeText: '上午 10:03',
          stopTag: '',
          avatarBg: '#ff3355',
          avatarText: 'OP',
        },
        {
          symbol: 'MKRUSDT',
          side: 'buy',
          multiple: 35,
          goal: 5,
          dateText: '4 月 18 日',
          timeText: '上午 10:03',
          stopTag: '',
          avatarBg: '#f2f5f7',
          avatarText: 'M',
        },
        {
          symbol: 'FETUSDT',
          side: 'sell',
          multiple: 35,
          goal: 5,
          dateText: '4 月 18 日',
          timeText: '上午 10:03',
          stopTag: '',
          avatarBg: '#0b1b33',
          avatarText: '',
        },
        {
          symbol: 'HBARUSDT',
          side: 'sell',
          multiple: 35,
          goal: 5,
          dateText: '4 月 18 日',
          timeText: '上午 10:03',
          stopTag: '',
          avatarBg: '#000',
          avatarText: 'H',
        },
        {
          symbol: 'NEARUSDT',
          side: 'buy',
          multiple: 35,
          goal: 0,
          dateText: '4 月 18 日',
          timeText: '上午 10:03',
          stopTag: '止损',
          avatarBg: '#f2f5f7',
          avatarText: 'N',
        },
        {
          symbol: 'ETHUSDT',
          side: 'buy',
          multiple: 35,
          goal: 5,
          dateText: '4 月 18 日',
          timeText: '上午 10:03',
          stopTag: '',
          avatarBg: '#6da8ff',
          avatarText: '⟠',
        },
      ],
    }
  },
  computed: {
    total() {
      return this.items.length
    },
    filtered() {
      const k = this.keyword.toUpperCase()
      if (!k) return this.items
      return this.items.filter(i => i.symbol.toUpperCase().includes(k))
    },
  },
  methods: {
    onSearch() {},
  },
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f8f8f8;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 16px;
}
.nav-title {
  flex: 1;
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  text-align: center;
}
.nav-bell {
  position: absolute;
  right: 16px;
  font-size: 18px;
}

.search {
  display: flex;
  align-items: center;
  height: 40px;
  margin: 20rpx;
  background: #fff;
  border-radius: 50rpx;
}
.search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 10rpx;
  image {
    width: 30rpx;
    height: 30rpx;
  }
}
.search-input {
  flex: 1;
}
.ph {
  color: #b7c0ca;
}

.scroll {
  box-sizing: border-box;
}
.list {
  padding: 0 16px 12px;
}

.cell {
  display: flex;
  align-items: center;
  padding: 14px;
  margin-bottom: 14px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
}
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.avatar-txt {
  font-weight: 700;
  color: #fff;
}

.content {
  flex: 1;
  margin-left: 6px;
}
.title-line {
  display: flex;
  align-items: center;
}
.symbol {
  font-size: 28rpx;
  font-weight: 700;
  color: #1f2937;
}
.chips {
  display: inline-flex;
  gap: 8px;
  margin-left: 10px;
}
.chip {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 2rpx 10rpx;
  font-size: 22rpx;
  color: #0f766e;
  background: #d8fffb;
  border-radius: 10rpx;
}
.chip-buy {
  color: #fff;
  background: #06cbb6;
}
.chip-sell {
  color: #fff;
  background: #ff5b50;
}
.chip-goal {
  color: #fff;
  background: #06cbb6;
}
.chip-stop {
  color: #fff;
  background: #ff5b50;
}
.chip-arrow {
  font-weight: 700;
}
.dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  background: url('/static/images/result/result-dropdown.png') no-repeat;
  background-size: 100% 100%;
}

.sub-line {
  margin-top: 8px;
}
.sub {
  font-size: 14px;
  color: #6b7280;
}

.tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  height: 64px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}
.tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8a949e;
}
.tab.active {
  color: #08c7b6;
}
.tab-ico {
  font-size: 22px;
}
.tab-txt {
  margin-top: 4px;
  font-size: 12px;
}
</style>
